<template>
    <div class="row flex-lg-row-reverse g-5">
        <div class="col-lg-4">
            <div class="coursedetails__package">
                <div class="coursedetails__thumb">
                    <img src="/images/course/home1/1.png" alt="packgae-image">
                    <div class="coursedetails__thumb-playbtn">
                        <VideoModal :link="'https://www.youtube.com/embed/Pf03RTjeISE'">
                    <template v-slot:button>
                            <a href="javascript:void(0);"><img src="/images/course/home1/2.png" alt="ply-btn"></a>
                    </template>
                </VideoModal>
                    </div>
                </div>
                <div class="coursedetails__offer">
                    <div class="coursedetails__offer-price">
                        <h3>$10.00</h3> <span>$80 80% off</span>
                    </div>
                    <div class="coursedetails__offer-time">
                        <p><i class="fa-regular fa-clock"></i> <span>5 days</span> left at this price!</p>
                    </div>

                    <nuxt-link to="/signin" class="trk-btn trk-btn--border trk-btn--secondary1 d-block">Buy
                        Now</nuxt-link>

                    <div class="coursedetails__offer-social">
                        <ul class="social">
                            <li class="social__item">
                                <a href="#" class="social__link social__link--rounded5"><i
                                        class="fab fa-facebook-f"></i></a>
                            </li>
                            <li class="social__item">
                                <a href="#" class="social__link social__link--rounded5"><i class="fab fa-instagram"></i></a>
                            </li>
                            <li class="social__item">
                                <nuxt-link to="/signin" class="social__link social__link--rounded5"><i
                                        class="fab fa-twitter"></i></nuxt-link>
                            </li>
                        </ul>
                    </div>

                </div>
                <div class="coursedetails__footer">
                    <p>For details the course</p>
                    <a href="tel:16910"> <i class="fa-solid fa-phone"></i> Call (16910)</a>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="coursedetails__content">
                <div class="coursedetails__header">
                    <h3>The Complete 2023 Web Development Bootcamp</h3>
                    <p>Become a Full-Stack Web Developer with just ONE Course. HTML,CSS,Javascript,
                        Node,React, MongoBD, Web3 and DApps</p>
                    <div class="coursedetails__focus">
                        <div class="coursedetails__focus-rating">
                            <span>4.5</span>
                        </div>
                        <div class="coursedetails__focus-star">
                            <ul>
                                <li><i class="fa-solid fa-star"></i></li>
                                <li><i class="fa-solid fa-star"></i></li>
                                <li><i class="fa-solid fa-star"></i></li>
                                <li><i class="fa-solid fa-star"></i></li>
                                <li><i class="fa-solid fa-star"></i></li>
                            </ul>
                        </div>
                        <div class="coursedetails__focus-count">
                            <span>(237,732 ratings)</span>
                        </div>
                        <div class="coursedetails__focus-students">
                            <span>10+ Student</span>
                        </div>
                    </div>

                </div>
                <div class="coursedetails__info">
                    <ul class="nav nav-pills " id="pills-tab" role="tablist">
                        <li class="nav-item active" role="presentation">
                            <button class="trk-btn active" id="pills-overview-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-overview" role="tab" aria-controls="pills-overview"
                                aria-selected="true"><i class="fa-solid fa-grip-vertical"></i> Overview</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="trk-btn" id="pills-curriculum-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-curriculum" role="tab" aria-controls="pills-curriculum"
                                aria-selected="false"><i class="fa-solid fa-file"></i> Curriculum</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="trk-btn" id="pills-instructor-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-instructor" role="tab" aria-controls="pills-instructor"
                                aria-selected="false"><i class="fa-solid fa-user"></i> Instructor</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="trk-btn" id="pills-reviews-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-reviews" role="tab" aria-controls="pills-reviews"
                                aria-selected="false"><i class="fa-solid fa-star"></i> Reviews</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="trk-btn" id="pills-help-tab" data-bs-toggle="pill" data-bs-target="#pills-help"
                                role="tab" aria-controls="pills-help" aria-selected="false"> <i
                                    class="fa-solid fa-phone"></i> Help</button>
                        </li>
                    </ul>
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-overview" role="tabpanel" content
                            aria-labelledby="pills-overview-tab" tabindex="0">
                            <div class="coursedetails__overview">
                                <h5>Study Plan</h5>
                                <p>There are many variations of passages of Lorem Ipsum available, but the
                                    majority have suffered alteration in some form, by injected humor, or
                                    randomized words which don't look even slightly believable. If you are going
                                    to use a passage of Lorem Ipsum, you need to be sure there isn't anything
                                    embarrassing hidden in the middle of text. All the Lorem Ipsum generators on
                                    the Internet tend to repeat predefined chunks as necessary, making this the
                                    first true generator on the Internet. It uses a dictionary of over 200 Latin
                                    words, combined with a handful of model sentence structures, to generate</p>
                                <h5>What will you learn from this course?</h5>
                                <ul class="overview-list">
                                    <li><i class="fa-regular fa-circle-check"></i> Basic knowledge and detailed
                                        understanding of CSS3 to create attract websites
                                    </li>
                                    <li><i class="fa-regular fa-circle-check"></i> Details Idea about HTML5,
                                        Creating Basic Web Pages using HTML5
                                    </li>
                                    <li><i class="fa-regular fa-circle-check"></i> Web Page Layout Design and
                                        Slider Creation
                                    </li>
                                    <li><i class="fa-regular fa-circle-check"></i> Image Insert method of web
                                        site
                                    </li>
                                    <li><i class="fa-regular fa-circle-check"></i> Creating Styling Web Pages
                                        Using CSS3
                                    </li>
                                    <li><i class="fa-regular fa-circle-check"></i> How to Convert UI / UX to
                                        HTML
                                    </li>
                                    <li><i class="fa-regular fa-circle-check"></i> Detailed ideas about
                                        structured project creation
                                    </li>
                                    <li><i class="fa-regular fa-circle-check"></i> Steps to Start Freelancing by
                                        Learning Web Design</li>
                                </ul>
                                <h5>Details about the course</h5>
                                <p class="mb-3">Being able to speak English fluently is an important skill in
                                    this age.
                                    Having spoken English skills can help you advance in every stage of life.
                                    Acquiring English speaking skills or correct pronunciation of English is
                                    very important. </p>
                                <p>There are many people who know English well, but feel reluctant to speak
                                    English due to lack of confidence. Ten Minute School brings you the 'Spoken
                                    English.</p>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="pills-curriculum" role="tabpanel"
                            aria-labelledby="pills-curriculum-tab" tabindex="0">
                            <div class="coursedetails__curriculum">
                                <div class="coursedetails__overview">
                                    <h5>What will you learn from this course?</h5>
                                    <ul class="overview-list">
                                        <li><i class="fa-regular fa-circle-check"></i> Basic knowledge and
                                            detailed
                                            understanding of CSS3 to create attract websites
                                        </li>
                                        <li><i class="fa-regular fa-circle-check"></i> Details Idea about HTML5,
                                            Creating Basic Web Pages using HTML5
                                        </li>
                                        <li><i class="fa-regular fa-circle-check"></i> Web Page Layout Design
                                            and
                                            Slider Creation
                                        </li>
                                        <li><i class="fa-regular fa-circle-check"></i> Image Insert method of
                                            web
                                            site
                                        </li>
                                        <li><i class="fa-regular fa-circle-check"></i> Creating Styling Web
                                            Pages
                                            Using CSS3
                                        </li>
                                        <li><i class="fa-regular fa-circle-check"></i> How to Convert UI / UX to
                                            HTML
                                        </li>
                                        <li><i class="fa-regular fa-circle-check"></i> Detailed ideas about
                                            structured project creation
                                        </li>
                                        <li><i class="fa-regular fa-circle-check"></i> Steps to Start
                                            Freelancing by
                                            Learning Web Design</li>
                                    </ul>
                                    <h5>Details about the course</h5>
                                    <p>There are many people who know English well, but feel reluctant to speak
                                        English due to lack of confidence. Ten Minute School brings you the
                                        'Spoken
                                        English.</p>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="pills-instructor" role="tabpanel"
                            aria-labelledby="pills-instructor-tab" tabindex="0">
                            <div class="coursedetails__instructor">
                                <div class="team team--details mt-5">
                                    <div class="team__wrapper">
                                        <div class="row g-5 align-items-center">
                                            <div class="col-lg-4">
                                                <div class="team__thumb">
                                                    <img src="/images/team/home3/3.png" alt="Team Image">
                                                </div>
                                            </div>
                                            <div class="col-lg-8">
                                                <div class="team__content">
                                                    <h5 class="mb-0">Marvin McKinney</h5>
                                                    <p class="designation">Web Designer, Researcher, Instructor
                                                        at Tork</p>
                                                    <p class="info">A Zend-certified PHP developer and an active
                                                        community person who loves to
                                                        lead and
                                                        engage with other developers. A full-stack developer
                                                        with a strong programming.</p>

                                                    <ul class="social mt-4">
                                                        <li class="social__item">
                                                            <a href="#" class="social__link social__link--rounded5"><i
                                                                    class="fab fa-facebook-f"></i></a>
                                                        </li>
                                                        <li class="social__item">
                                                            <a href="#" class="social__link social__link--rounded5"><i
                                                                    class="fab fa-instagram"></i></a>
                                                        </li>
                                                        <li class="social__item">
                                                            <nuxt-link to="/signin"
                                                                class="social__link social__link--rounded5"><i
                                                                    class="fab fa-twitter"></i></nuxt-link>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="pills-reviews" role="tabpanel" aria-labelledby="pills-reviews-tab"
                            tabindex="0">
                            <div class="coursedetails__reviews">
                                <div class="coursedetails__overview">
                                    <h5>Reviews</h5>
                                    <div class="coursedetails__coursereviews">
                                        <div class="coursedetails__coursereviews-author">
                                            <div class="coursedetails__coursereviews-thumb">
                                                <img src="/images/testimonial/home1/2.png" alt="author">
                                            </div>
                                            <div class="coursedetails__coursereviews-designation">
                                                <h6>Mobarok Hossain</h6>
                                                <span>Frontend Designer</span>
                                                <blockquote>
                                                    <p>There are many variations of passages of Lorem Ipsum
                                                        available, but the majority have suffered alteration in
                                                        some
                                                        form, by injected humor</p>
                                                </blockquote>

                                            </div>
                                        </div>
                                        <div class="coursedetails__coursereviews-rating">
                                            <span><i class="fa-solid fa-star"></i></span>
                                            <span><i class="fa-solid fa-star"></i></span>
                                            <span><i class="fa-solid fa-star"></i></span>
                                            <span><i class="fa-solid fa-star"></i></span>
                                            <span><i class="fa-solid fa-star"></i></span>
                                        </div>
                                    </div>
                                    <div class="coursedetails__coursereviews">
                                        <div class="coursedetails__coursereviews-author">
                                            <div class="coursedetails__coursereviews-thumb">
                                                <img src="/images/testimonial/home1/3.png" alt="author">
                                            </div>
                                            <div class="coursedetails__coursereviews-designation">
                                                <h6>Michael Jack</h6>
                                                <span>Designer</span>
                                                <blockquote>
                                                    <p>There are many variations of passages of Lorem Ipsum
                                                        available, but the majority have suffered alteration in
                                                        some
                                                        form, by injected humor</p>
                                                </blockquote>

                                            </div>
                                        </div>
                                        <div class="coursedetails__coursereviews-rating">
                                            <span><i class="fa-solid fa-star"></i></span>
                                            <span><i class="fa-solid fa-star"></i></span>
                                            <span><i class="fa-solid fa-star"></i></span>
                                            <span><i class="fa-solid fa-star mute"></i></span>
                                            <span><i class="fa-solid fa-star mute"></i></span>
                                        </div>
                                    </div>
                                    <div class="coursedetails__reviewform">
                                        <h5>Write Review</h5>
                                        <form action="/">
                                            <div class="coursedetails__coursereviews-rating mb-4">
                                                <a href="javascript:void(0);"><span><i
                                                            class="fa-solid fa-star"></i></span></a>
                                                <a href="javascript:void(0);"><span><i
                                                            class="fa-solid fa-star"></i></span></a>
                                                <a href="javascript:void(0);"><span><i
                                                            class="fa-solid fa-star"></i></span></a>
                                                <a href="javascript:void(0);"><span><i
                                                            class="fa-solid fa-star mute"></i></span></a>
                                                <a href="javascript:void(0);"><span><i
                                                            class="fa-solid fa-star mute"></i></span></a>
                                            </div>
                                            <div class="row g-4">
                                                <div class="col-lg-6">
                                                    <div class="input-group">
                                                        <input class="form-control" type="text" placeholder="Full Name">
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="input-group">
                                                        <input class="form-control" type="text" placeholder="Subject">
                                                    </div>
                                                </div>
                                                <div class="col-lg-12">
                                                    <div class="input-group">
                                                        <input class="form-control" type="email" placeholder="Email here">
                                                    </div>
                                                </div>
                                                <div class="col-lg-12">
                                                    <div class="input-group">
                                                        <textarea cols="30" rows="5" class="form-control"
                                                            placeholder="Enter Your Message"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                            <button type="submit"
                                                class="trk-btn trk-btn--rounded trk-btn--secondary1 mt-5">Submit
                                                Now</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="pills-help" role="tabpanel" aria-labelledby="pills-help-tab"
                            tabindex="0">
                            <div class="coursedetails__help">
                                <div class="coursedetails__overview">
                                    <h5>For details about the course</h5>
                                    <p>There are many people who know English well, but feel reluctant to speak
                                        English due to lack of confidence. Ten Minute School brings you the
                                        'Spoken
                                        English.</p>
                                    <div class="coursedetails__overview-helpline">
                                        <div class="row g-4 align-items-center">
                                            <div class="col-md-6">
                                                <div class="thumb">
                                                    <img src="/images/course/home1/1.png" alt="packgae-image">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="info ps-3">
                                                    <h6>Our Hotline</h6>
                                                    <a href="tel:16910"> <i class="fa-solid fa-phone"></i> Call
                                                        (16910)</a>
                                                </div>
                                                <div class="info ps-3 mt-4">
                                                    <h6>Email</h6>
                                                    <a href="mailto:example@example.com"> <i
                                                            class="fa-solid fa-envelope"></i>
                                                        example@example.com</a>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import VideoModal from '@/components/base/modals/VideoModal.vue'
export default {
    components: { VideoModal }
}
</script>